<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/18 0018
  Time: 14:38
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>反馈</title>
    <jsp:include page="/commons/common-js.jsp"></jsp:include>
</head>
<body>
<table class="layui-hide" id="fbtable" lay-filter="fbtable"></table>

<script type="text/html" id="msgalltool">
    <button class="layui-btn layui-btn-xs" type="button" lay-event="msgalltool">查看</button>
</script>
<script type="text/html" id="restool">
    {{# if(d.state==1){ }}
    <button class="layui-btn layui-btn-xs" type="button" lay-event="restool">回复</button>
    {{# } }}
</script>
<script type="text/html" id="addgame">
    <form class="layui-form" lay-filter="resform" style="padding: 20px 20px 0 20px">
        <input type="hidden" id="userId" name="userId">
        <input type="hidden" id="id" name="id">
        <div class="layui-form-item">
            <textarea placeholder="请输入" name="msg" class="layui-textarea" style="height: 400px"></textarea>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-md2 layui-col-md-offset5">
                <button class="layui-btn layui-btn-sm" lay-submit="" id="resbutton"
                        lay-filter="resbutton" >添加</button>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="searchtoolbar">
    <div class="layui-inline">
        <label class="layui-form-label" >时间</label>
        <div class="layui-inline" style="width: 120px">
            <input type="text" id="q_time"  placeholder="yyyy-MM-dd" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label" >类型</label>
        <div class="layui-inline">
            <select id="q_state" lay-filter="q_state" >
                <option value="-1" selected>全部</option>
                <option value="1" >未处理</option>
                <option value="0" >已处理</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">id</div>
    <div class="layui-input-inline">
        <input type="text" class="layui-input" id="gid">
    </div>
    <div class="layui-inline">
        <button class="layui-btn-sm" lay-event="query">查询</button>
    </div>
</script>

<script type="text/html" id="statetemplet">
    {{# if(d.state==0){ }}
    <span style="color: #1E9FFF">已处理</span>
    {{# }else if(d.state==1){ }}
    <span style="color: red">未处理</span>
    {{# } }}
</script>
<script type="text/html" id="typetemplet">
    {{# if(d.type==1){ }}
    <span >充值问题</span>
    {{# }else if(d.type==2){ }}
    <span >登录问题</span>
    {{# }else if(d.type==3){ }}
    <span >游戏BUG</span>
    {{# }else{ }}
    <span >其他问题</span>
    {{# } }}
</script>

<script>
    layui.use(['table', 'form', 'laytpl','laydate'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            laytpl = layui.laytpl,
            laydate = layui.laydate;
        laydate.render({
            elem: '#q_time'
        });
        var tableins = table.render({
            elem: '#fbtable'
            , url: '/feedbackweb/all'
            , defaultToolbar: []
            , toolbar: '#searchtoolbar'
            , cols: [[
                {field: 'id', width: 50, title: 'id'}
                ,{field: 'userId', width: 50, title: '账号'}
                ,{field: 'type', width: 90,templet: '#typetemplet', title: '类型'}
                ,{field: 'state', width: 90,templet: '#statetemplet', title: '状态'}
                ,{field: 'msg', width: 300, title: '消息'}
                ,{field: 'addTime', width: 160, title: '反馈时间'}
                ,{field: 'reply', width: 300, title: '回复'}
                ,{field: 'replyTime', width: 160, title: '回复时间'}
                ,{field: 'msgall', width: 80,toolbar: '#msgalltool', title: '详细'}
                ,{field: 'res', width: 80,toolbar: '#restool', title: '回复'}
            ]]
            , page: true
            , limits: [19, 50, 100]
            , limit: 19
            , height: 'full-1',
        });

        table.on("toolbar(fbtable)",function (obj) {
            console.info(obj)
            switch(obj.event){
                case 'query':
                    renderTable();
                    break;
            };
        });

        var layerc = 0;
        //监听行工具事件
        table.on('tool(fbtable)', function(obj){
            let data = obj.data;

            if(obj.event == "msgalltool"){

                layer.alert(data.msg,{
                    area: ['420px', '240px'], //宽高
                });
            }
            if(obj.event == "restool"){
                laytpl(addgame.innerHTML).render({}, function (html) {
                    layerc = layer.open({
                        type: 1,
                        title: "回复", //不显示标题
                        skin: 'layui-layer-rim', //加上边框
                        area: ['800px', '550px'], //宽高
                        content: html
                    });
                    form.render();
                    $("#userId").val(data.userId)
                    $("#id").val(data.id)
                });
            }
        })

        //监听提交
        form.on('submit(resbutton)', function (data) {
            console.debug(data.field)
            $.ajax({
                data: data.field,
                type: 'get',
                url: '/feedbackweb/res',
                success: function (res) {
                    layer.msg(res.msg);
                    tableins.reload();
                },
            })
            layer.close(layerc)
            return false;
        });
        function renderTable(){
            let q_time = $("#q_time").val();
            let state = $("#q_state").val();
            let gid = $("#gid").val();
            tableins.reload({
                where:{
                    queryTime : q_time,
                    state : state,
                    gid : gid
                }
            });
            laydate.render({
                elem: '#q_time'
            });
            $("#q_time").val(q_time);
            $("#gid").val(gid);

        }
    });

</script>
</body>
</html>
